<template>
  <div class="main">
    <div class="title">
      <span @click="onLogin">密码登录</span>
    </div>

    <div class="title-msg">
      <span @click="onMessgae">请输入登录账户和密码</span>
    </div>

    <form class="login-form" :model="account">
      <div class="input-content">
        <div>
          <input type="text" placeholder="用户名" v-model="account.username" />
        </div>
        <div style="margin-top: 16px">
          <input type="password" placeholder="登录密码" maxlength="32" v-model="account.password" />
        </div>
      </div>
      <div style="text-align: center">
        <button class="enter-btn" @click.prevent="onSubmit">登录</button>
      </div>
      <div class="foor">
        <div class="left"><span>忘记密码 ?</span></div>
        <div class="right">
          <span>注册用户</span>
        </div>
      </div>
    </form>
  </div>
</template>
<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const account = reactive({
  username: '',
  password: ''
})

import { useWsuserStore } from '@/stores/ws-users'
const wsstore = useWsuserStore()
const onSubmit = () => {
  var params = { name: account.username, passwd: account.password }
  wsstore.login(params).then((res) => alert(res.info.msg))
}

import { useUserStore } from '@/stores/axios-user'
const store = useUserStore()
const onLogin = () => {
  store.login(account).then((res) => {
    if (res) {
      alert('登录成功')
      router.push('/')
    } else alert('登录失败')
  })
}

import framePost from '@/utils/framePost'
const iframe = framePost((msg) => {
  let res = JSON.parse(msg)
  alert('status:' + res.status + ' name:' + res.data.name)
})
const onMessgae = () => {
  var data = { type: 'post', url: 'http://thinktest/api/Test/login', data: account }
  iframe.sendMessage(JSON.stringify(data), '*')
}
</script>
<style>
.main {
  margin: 0 auto;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 15px;
  width: 350px;
  height: 350px;
  background: #ffffff;
  /*以下css用于让登录表单垂直居中在界面,可删除*/
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -175px;
  margin-left: 15px;
}

.title {
  width: 100%;
  height: 40px;
  line-height: 40px;
}

.title span {
  font-size: 18px;
  color: #353f42;
}

.title-msg {
  width: 100%;
  height: 64px;
  line-height: 64px;
}

.title:hover {
  cursor: default;
}

.title-msg:hover {
  cursor: default;
}

.title-msg span {
  font-size: 12px;
  color: #707472;
}

.input-content {
  width: 100%;
  height: 120px;
}

.input-content input {
  width: 330px;
  height: 40px;
  border: 1px solid #dad9d6;
  background: #ffffff;
  padding-left: 10px;
  padding-right: 10px;
}

.enter-btn {
  width: 350px;
  height: 40px;
  color: #fff;
  background: #0bc5de;
  line-height: 40px;
  text-align: center;
  border: 0px;
}

.foor {
  width: 100%;
  height: auto;
  color: #9b9c98;
  font-size: 12px;
  margin-top: 20px;
}

.enter-btn:hover {
  cursor: pointer;
  background: #1db5c9;
}

.foor div:hover {
  cursor: pointer;
  color: #484847;
  font-weight: 600;
}

.left {
  float: left;
}
.right {
  float: right;
}
</style>
@/stores/axios-user
